<template>
  <div id="EditPayrollCardInfo">
    <el-dialog
      title="编辑工资卡信息"
      :visible="visible"
      :before-close="handleClose"
      width="400px"
      @opened="handleOpen"
    >
      <el-form :model="editForm" class="editForm" :rules="rules" ref="editForm">
        <el-form-item label="员工姓名：" prop="username">
          <el-input v-model="editForm.username" disabled />
        </el-form-item>
        <el-form-item label="证件类型：" prop="idType">
          <el-select v-model="editForm.idType" disabled>
            <el-option label="身份证" value="身份证"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码：" prop="idNo">
          <el-input v-model="editForm.idNo" disabled />
        </el-form-item>
        <el-form-item label="开户银行：" prop="bankcode">
          <el-select v-model="editForm.bankcode" filterable>
            <el-option
              v-for="item in bankList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户支行：" prop="bankBranch">
          <el-input v-model="editForm.bankBranch" />
        </el-form-item>
        <el-form-item label="银行卡号：" prop="bankAccount">
          <el-input v-model="editForm.bankAccount" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getBankList } from "@/util/xc/utils";
import { mapState } from "vuex";
import { isBank } from "@/util/validate";
export default {
  name: "EditPayrollCardInfo",
  props: {
    isCreate: {
      type: Boolean,
      default: true,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    activeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    subId: {
      type: String
    }
  },
  data() {
    return {
      editForm: {
        bankaddress: "",
        bankBranch: "",
        bankcode: "",
        userId: "",
        idNo: "",
        idType: "身份证",
        username: "",
        bankAccount: "",
      },
      // bankList: []
      rules: {
        // 对身份证格式进行校验
        bankAccount: [{ validator: isBank, trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapState({
      bankList: (state) => state.reward.bankList,
    }),
  },
  methods: {
    handleClose() {
      this.$emit("update:visible", false);
    },
    async handleOpen() {
      const {
        openbanksname,
        username,
        userid,
        cardnumber,
        cardrtype,
        banksnumber,
        openbanksdetial,
      } = this.activeData;
      this.editForm = {
        bankBranch: openbanksdetial,
        bankcode: openbanksname,
        userId: userid,
        idType: cardrtype,
        idNo: cardnumber,
        bankAccount: banksnumber,
        username,
      };
      console.log(this.activeData);
      // this.bankList = await this.searchBankSelect();
    },
    handleSubmit() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.editSalaryCard();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    /**
     * @description 查询花名册银行列表
     */
    searchBankSelect() {
      return this.$api.commonXc.GetBankSelect().then((res) => {
        return res.data.data;
      });
    },

    editSalaryCard() {
      const { bankBranch, bankcode, userId, idType, idNo, bankAccount } =
        this.editForm;
      this.$api.payrollCredit
        .EditOpenbanks({
          bankBranch,
          bankcode,
          userId,
          idType,
          idNo,
          bankAccount,
          subId: this.subId

        })
        .then((res) => {
          if (res.data.status == 200) {
            this.handleClose();
            this.$message.success(res.data.message);
            this.$emit("search", true);
          }
        });
    },
  },
  mounted() {
    getBankList();
  },
};
</script>
<style lang="less" scoped>
#EditPayrollCardInfo {
  .editForm {
    width: 300px;
    margin-left: 50%;
    transform: translateX(-50%);
    :deep(.el-form-item) {
      .el-select,
      .el-input {
        width: 200px;
      }
    }
    .btnList {
      :deep(.el-form-item__content) {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
    }
  }
}
</style>